// 它需要一个配置对象作为参数，通过对象的不同的属性来指定它的配置
import { createSlice } from '@reduxjs/toolkit'
import { commponentsData } from "../../mock/data.js";


export const listReducer = createSlice({
    name: 'canva', // 命名空间，用来自动生成action中的type，name值会成为前缀；保证唯一，不重名
    initialState: {
        //初始
        initialState: [],
        //左侧基础组件列表
        commponentsData: commponentsData,
        //中间编辑画布区的所有拖拽过的数组
        componentList: [],
        // 当前选中组件的Item数据
        currentcomponent: null,
        // 当前选中组件的Id
        currentCptId: null,
        //右键删除上移菜单
        menuInfo: {
            // 显示隐藏
            showMenu: false,
            menuLeft: 120,
            menuTop: 0,
        },
        //拖拽时候存储的类型 
        dargInfo: {
            value: '',
            type: ''
        }
    },
    reducers: {
        // 指定state的各种操作，直接在对象中添加方法
        // setName(state, action) {
        // 两个参数：state代理对象，可以直接修改；action操作的信息
        //拖拽左边的时候把类型存储
        ADDItem: (state, { payload, type }) => {
            state.dargInfo = payload
        },
        //拖拽放后添加新增commponentsData
        addItem: (state, { payload, type }) => {
            state.componentList.push(payload)
        },
        //拖拽的当前数据
        addcurrentcomponent: (state, { payload, type }) => {
            state.currentcomponent = payload
            state.currentCptId = payload.id
            state.menuInfo.showMenu = false
        },
        // 鼠标右键事件
        setCurrItemId: (state, { payload, type }) => {
            state.menuInfo.showMenu = !state.menuInfo.showMenu
            state.menuInfo.menuTop = state.currentcomponent.style.top
            state.menuInfo.menuLeft = state.currentcomponent.style.left + state.currentcomponent.style.width
        },
        // 设置当前选种组件id
        setCurrItemId1(state, item) {
            state.currentCptId = item.payload
            const item1 = state.componentList.find(item => item.id === state.currentCptId)
            state.currentcomponent = item1;
            state.menuInfo.showMenu = false;
        },
        //删除
        delItem: (state) => {
            //通过当前拖拽的数据去画布数组找下标删除
            let index = state.componentList.findIndex(item => item.id == state.currentcomponent.id)
            if (index !== -1) { // 确保找到的索引是有效的
                state.componentList.splice(index, 1);
                state.menuInfo.showMenu = false;
            }
        },
        //上移
        moveItem: (state, { payload }) => {
            if (payload) {
                let currentItem = state.componentList.find(item => item.id === state.currentcomponent.id);
                if (currentItem) {
                    // 更新组件的位置
                    currentItem.style.top -= payload;
                    //强制更新
                    state.currentcomponent = currentItem
                }
            }
            state.menuInfo.menuTop = state.currentcomponent.style.top
            state.menuInfo.menuLeft = state.currentcomponent.style.left + state.currentcomponent.style.width
        },
        // 更新文本
        updataText: (state, { payload, type }) => {
            if (!state.currentCptId) {
                return false
            }
            const currentItem = state.componentList.find(item => item.id == state.currentCptId)
            if (payload.hasOwnProperty('propLable')) {
                currentItem.propLable = payload.propLable
            }
            else
                currentItem.style = { ...currentItem.style, ...payload }
            state.currentcomponent = currentItem
        },
        //清除
        showMenu(state, data) {
            // state.menuInfo.showMenu = true;
            state.menuInfo = { ...data.payload, showMenu: true }
        },
        Weightbolder: (state) => {
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                // 如果当前的 fontWeight 是 'normal'，就改为 'bolder'，否则改回 'normal'
                currentItem.style.fontWeight = currentItem.style.fontWeight === 'bolder' ? 'normal' : 'bolder';
                state.currentcomponent = currentItem; // 更新当前组件
            }
        },
        toggleItalic: (state) => {
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                currentItem.style.fontStyle = currentItem.style.fontStyle === 'italic' ? 'normal' : 'italic';
                state.currentcomponent = currentItem; // 更新当前组件
            }
        },
        setFontSize: (state, action) => {
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                currentItem.style.fontSize = `${action.payload}px`; // 设置新字体大小
                state.currentcomponent = currentItem; // 更新当前组件
            }
        },
        toggleUnderline: (state) => {
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                currentItem.style.textDecoration = currentItem.style.textDecoration === 'underline' ? 'none' : 'underline';
                state.currentcomponent = currentItem;
            }
        },
        setLetterSpacing: (state, action) => {
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                currentItem.style.letterSpacing = `${action.payload}px`;
                state.currentcomponent = currentItem;
            }
        },
        setRotation: (state, action) => {
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                currentItem.style.transform = `rotate(${action.payload}deg)`;
                state.currentcomponent = currentItem;
            }
        },
        deleteComponent: (state, action) => {
            state.componentList = state.componentList.filter(item => item.id != action.payload)
        },
        setColorItem: (state, action) => {
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                currentItem.style.color = action.payload; // 设置颜色
                state.currentComponent = currentItem;
            }
        },
        setOpacitys: (state, action) => {
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                currentItem.style.opacity = action.payload; // 设置透明度
                state.currentComponent = currentItem;
            }
        },
        toggleTextDirection: (state) => {
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                // 切换方向
                currentItem.style.writingMode = currentItem.style.writingMode === 'vertical-rl' ? 'horizontal-tb' : 'vertical-rl';
                state.currentComponent = { ...currentItem }; // 深拷贝以确保不修改原对象
            }
        },
        setComponentSize: (state, action) => {
            const { size } = action.payload;
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                currentItem.style = {
                    ...currentItem.style,
                    width: size.width,
                    height: size.height,
                    top: size.top !== undefined ? size.top : currentItem.style.top,
                    left: size.left !== undefined ? size.left : currentItem.style.left,
                };
                state.currentComponent = { ...currentItem };
            }
        },
        changFont: (state, action) => {
            const currentItem = state.componentList.find(item => item.id == state.currentCptId)
            if (currentItem) {
                const { fontFamily } = action.payload
                currentItem.style.fontFamily = fontFamily
                state.currentcomponent = currentItem
            }
        },
        setTextAlign: (state, action) => {
            const currentItem = state.componentList.find(item => item.id === state.currentCptId);
            if (currentItem) {
                currentItem.style.textAlign = action.payload; // 更新对齐方式
                state.currentcomponent = currentItem; // 更新当前组件
            }
        }
    }

})

// 切片对象会【自动】的帮助我们生成action；切片对象存在属性actions
// actions中存储的是slice自动生成action创建器（函数），调用函数后会自动创建action对象
// action对象的结构 {type:name/函数名, payload:函数的参数}
export const { setTextAlign, changFont, setComponentSize, toggleTextDirection, setOpacitys, setColorItem, deleteComponent, setRotation, setLetterSpacing, showMenu, ADDItem, addItem, addcurrentcomponent, toggleUnderline, setCurrItemId1, setCurrItemId, delItem, moveItem, updataText, Weightbolder, toggleItalic, setFontSize } = listReducer.actions

// 导出reducer在store里面使用
export default listReducer.reducer;
